import React from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux'
import * as reviewAction from '../../../../actions/review.action' 
import cx from 'classnames';

import style from './style.styl';
import contentStyle from '../plugins/style.reviewContent.styl';
import ReviewAdminItem from './ReviewAdminItem';
import {Tooltip, Link, IconFont} from '../../../../ui-components';

import TeamProcess from '../../../homenew/okr/TeamProcess';
import ReactTooltip from 'react-tooltip';

@connect(({review}) => ({review}),dispatch => ({actions: bindActionCreators({...reviewAction }, dispatch)}))
class ReviewAdminReport extends React.Component {
  static contextTypes = {
    router: React.PropTypes.object
  }
  constructor(props) {
    super(props);
    this.displayName = 'ReviewAdminReport';
  }
  componentDidMount() {
    const {
      templateId
    } = this.props.routeParams;
    this.props.actions.fetchReviewReport(templateId);
    this.props.actions.fetchReviewReportActivities(templateId)
  }
  getHeader = (v,i) => {
    const {
      invitationDisplayType,
      activityDisplayType,
    } = v;
    const isCanceled = activityDisplayType ? false : invitationDisplayType === 7;
    const isSubmitted = activityDisplayType ? !!~[2,3].indexOf(activityDisplayType) : !!~[3,4].indexOf(invitationDisplayType);
    const header =  <div key={i || 'i'} className={contentStyle['user-list-item-s']}>
        <Link 
          className={cx({
            [contentStyle['settings-avatar']]: true,
            [contentStyle['settings-avatar-manager']]: v.isManager,
          })} 
          srcIcon="avatar"
          width="30"
          src={v.revieweeUserProfile.avatarUrl}
        />
        {
          isCanceled ? 
          <IconFont value="stop" style={{position: 'absolute',color: '#ee7d9e',background: '#fff',
            borderRadius: '50%',bottom: '-3px',right: '-3px',fontSize: '16px'}}/>
          :
          isSubmitted ?
          <IconFont value="tick" style={{position: 'absolute',color: '#fff',background: '#59d46c',
            borderRadius: '50%',bottom: '-3px',right: '-3px',fontSize: '24px'}}/>
          : null
        }
    </div>
    if(typeof i === 'number'){
      return <div data-tip={v.revieweeUserProfile.fullName} style={{display: 'inline-block'}} > 
        {header}
        <ReactTooltip aria-haspopup='true' role='example' />
          
    </div>
    }
    return header;
  } 
  checkReport = (activityId) => {
    this.context.router.push(`/review/admin/${activityId}/detail`);
  } 
  render() {
    const {
      reviewReport = {},
      reviewReportActivities = []
    } = this.props.review;
    const {
      reviewTemplateDTO,
      managerFinished = 0,
      managerInProgress = 0,
      managerNotBegin = 0,
      peerFinished = 0,
      peerInProgress = 0,
      peerNotBegin = 0,
      selfFinished = 0,
      selfInProgress = 0,
      selfNotBegin = 0,
    } = reviewReport;
    const {
      templateId
    } = this.props.routeParams;
    const data1 = [
      {value: selfFinished, text: '已完成', fill: '#5e91f8'},
      {value: selfInProgress, text: '撰写中', fill: '#7fd0da'},
      {value: selfNotBegin, text: '未开始', fill: '#e1e3e9'},
    ]
    const data2 = [
      {value: peerFinished, text: '已完成', fill: '#5e91f8'},
      {value: peerInProgress, text: '撰写中', fill: '#7fd0da'},
      {value: peerNotBegin, text: '未开始', fill: '#e1e3e9'},
    ]
    const data3 = [
      {value: managerFinished, text: '已完成', fill: '#5e91f8'},
      {value: managerInProgress, text: '撰写中', fill: '#7fd0da'},
      {value: managerNotBegin, text: '未开始', fill: '#e1e3e9'},
    ]
    return (
      <div>
        {
          reviewTemplateDTO ? 
          <ReviewAdminItem item={reviewTemplateDTO} report/>
          : null
        }
        <div className={cx({
          [style['page']]: true,
          [style['page-l']]: true,
        })}>
          <div className={style['report-chart-area']}>
            <div className={style['report-chart']}>
              <TeamProcess data={data1} report />
              <div className={style['report-info-item']}>
                <h2>自评</h2>
                <p>{`${selfFinished+selfInProgress+selfNotBegin}条待评`}</p>
              </div>
            </div>
            <div className={style['report-chart']}>
              <TeamProcess data={data2} report />
              <div className={style['report-info-item']}>
                <h2>同事反馈</h2>
                <p>{`${peerFinished+peerNotBegin+peerInProgress}条待评`}</p>
              </div>
            </div>
            <div className={style['report-chart']}>
              <TeamProcess data={data3} report />
              <div className={style['report-info-item']}>
                <h2>主管评价</h2>
                <p>{`${managerFinished+managerNotBegin+managerInProgress}条待评`}</p>
              </div>
            </div>
          </div>
          <div >
            <div className={style['table']}>
              <div className={style['tr']}>
                <div className={style['th']} style={{width: '15%'}}>主管</div>
                <div className={style['th']} style={{width: '15%'}}>自评人</div>
                <div className={style['th']} style={{width: '40%'}}>受邀反馈人</div>
                <div className={style['th']} style={{width: '15%'}}>评分</div>
                <div className={style['th']} style={{width: '15%'}}>查看</div>
              </div>
              {
                reviewReportActivities.map((v, i) => {
                  const {
                    activity,
                    managerInvitation,
                    staffInvitations,
                  } = v;
                  return (
                    <div key={i} className={style['tr']}>
                      <div className={style['td']} style={{width: '15%'}}>
                        {this.getHeader(managerInvitation)}
                        <div className={style['td-name']}>{managerInvitation.revieweeUserProfile.fullName} </div>
                      </div>
                      <div className={style['td']} style={{width: '15%'}}>
                        {this.getHeader(activity)}
                        <div className={style['td-name']}>{activity.revieweeUserProfile.fullName} </div>
                      </div>
                      <div className={style['td']} style={{width: '40%'}}>
                        {
                          staffInvitations.map((v,i) => {
                            return this.getHeader(v, i);
                          })
                        }
                      </div>
                      <div className={style['td']} style={{width: '15%'}}>
                        {managerInvitation.score}分
                      </div>
                      <div className={style['td']} style={{width: '15%'}}>
                        <Link className={style['link']} onClick={this.checkReport.bind(this, activity.activityId)} label={'查看'}/>
                      </div>
                    </div> 
                  );
                })
              }
            </div>
          </div>
        </div>
      </div>
    );
  }
}

export default ReviewAdminReport;
